<template>
  <div class="app-container">
    <div class="view-title">宽带管理</div>

    <el-button
      type="primary"
      @click="handlerAdd"
      v-permission="['broadband:add']"
      >添加</el-button
    >

    <el-table
      :data="broadbandTableData"
      :header-cell-style="{
        borderColor: '#F0F0F0',
        height: '51px',
        background: '#F0F0F0',
        color: '#333',
      }"
      :row-style="{ height: '51px' }"
      :cell-style="{ borderColor: '#F0F0F0' }"
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column prop="id" label="ID" width="120"> </el-table-column>
      <el-table-column prop="name" label="宽带名称"> </el-table-column>
      <el-table-column prop="hkgj_package_id" label="套餐编码"> </el-table-column>
      <el-table-column prop="cover_img" label="封面图">
        <template slot-scope="scope">
          <img :src="scope.row.cover_img" alt="" style="width: 70px" />
        </template>
      </el-table-column>
      <el-table-column prop="mini_text" label="描述"> </el-table-column>
      <el-table-column prop="head_img" label="宽带头图">
        <template slot-scope="scope">
          <img :src="scope.row.head_img" alt="" style="width: 70px" />
        </template>
      </el-table-column>
      <!-- <el-table-column prop="details" label="宽带详情图" width="280">
          </el-table-column> -->
      <el-table-column prop="front_back" label="前置/后置">
        <template slot-scope="scope">{{
          scope.row.front_back == 0 ? "前置" : "后置bie"
        }}</template>
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>

      <el-table-column label="是否上架">
        <template v-slot="{ row }">
          <el-switch
            v-model="row.is_upload"
            :active-value="1"
            :inactive-value="0"
            @change="upEnabled($event, row)"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column prop="belonging_place" label="归属地"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
            v-permission="['broadband:edit']"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="page_box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- 添加弹窗 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisibleAdd"
      width="50%"
      :close-on-click-modal="false"
      @close="handleCloseDialog"
    >
      <div class="dialog_add_box">
        <el-form
          :model="ruleFormAdd"
          ref="addRuleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="宽带名称" prop="name">
            <el-input v-model="ruleFormAdd.name"></el-input>
          </el-form-item>
          <el-form-item label="套餐编码" prop="hkgj_package_id">
            <el-input v-model="ruleFormAdd.hkgj_package_id"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="mini_text">
            <el-input v-model="ruleFormAdd.mini_text"></el-input>
          </el-form-item>
          <el-form-item label="价格" prop="price">
            <el-input v-model="ruleFormAdd.price">
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
          <el-form-item label="归属地" prop="belonging_place">
            <el-input v-model="ruleFormAdd.belonging_place"></el-input>
          </el-form-item>
          <el-form-item label="运营商" prop="operator">
            <el-select v-model="ruleFormAdd.operator" placeholder="请选择">
              <el-option
                v-for="item in operatorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="前置/后置" prop="front_back">
            <!-- <el-input v-model="ruleFormAdd.front_back"></el-input> -->
            <el-select v-model="ruleFormAdd.front_back" placeholder="请选择">
              <el-option
                v-for="item in optionsFrontBack"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上架状态" prop="is_upload">
            <!-- <el-switch v-model="ruleFormAdd.is_upload" active-text="已上架" inactive-text="已下架" active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch> -->
            <el-select
              v-model="ruleFormAdd.is_upload"
              placeholder="请选择上架状态"
            >
              <el-option
                v-for="item in isUploadOptions"
                :key="Number(item.value)"
                :label="item.label"
                :value="Number(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="封面图" prop="cover_img">
            <!-- <el-input v-model="ruleFormAdd.price"></el-input> -->
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadCoverImgUrl"
              :on-success="onSuccessFileCover"
              :on-error="onErrorFileCover"
              :data="{ type: '7' }"
              list-type="text"
            >
              <el-button size="small" type="primary">上传封面图</el-button>
            </el-upload>
            <span v-if="ruleFormAdd.cover_img">
              <img
                :src="ruleFormAdd.cover_img"
                alt=""
                class="main_img_box"
                @click="handlerMainImg(file)"
              />
            </span>
          </el-form-item>

          <el-form-item label="宽带头图" prop="head_img">
            <!-- <el-input v-model="ruleFormAdd.price"></el-input> -->
            <el-upload
              style="margin-right: 30px"
              class="upload-demo"
              :action="uploadHeaderImgUrl"
              :on-success="onSuccessFileHeader"
              :on-error="onErrorFileHeader"
              :data="{ type: '8' }"
              list-type="text"
            >
              <el-button size="small" type="primary">上传宽带头图</el-button>
            </el-upload>
            <span v-if="ruleFormAdd.head_img">
              <img
                :src="ruleFormAdd.head_img"
                alt=""
                class="main_img_box"
                @click="handlerHeaderImg(file)"
              />
            </span>
          </el-form-item>

          <el-form-item label="详情图">
            <!-- <el-input
            v-model="packageForm.detail"
            class="package_input"
          ></el-input> -->
            <tinymce ref="myEditor" :value="ruleFormAdd.details"></tinymce>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlerCancelAdd('addRuleForm')">取 消</el-button>
        <el-button type="primary" @click="handlerSureAdd('addRuleForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getAppBroadbandList,
  addAppBroadband,
  updateAppBroadband,
} from "@/api/broadband.js";
import tinymce from "@/components/Tinymce/index.vue";
export default {
  components: {
    tinymce,
  },
  data() {
    return {
      pageNow: 1,
      pageSize: 10,
      total: null,
      broadbandTableData: [],
      dialogVisibleAdd: false,
      ruleFormAdd: {},
      optionsFrontBack: [
        {
          value: "0",
          label: "前置",
        },
        {
          value: "1",
          label: "后置",
        },
      ],
      // 上架状态
      isUploadOptions: [
        {
          value: "0",
          label: "下架",
        },
        {
          value: "1",
          label: "上架",
        },
      ],
      uploadCoverImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles", // 主图url
      uploadHeaderImgUrl: process.env.VUE_APP_BASE_API + "/app/uploadFiles", // 头图url
      editId: "",
      dialogTitle: "",
      operatorOptions: [
        {
          value: "0",
          label: "移动",
        },
        {
          value: "1",
          label: "联通",
        },
        {
          value: "2",
          label: "电信",
        },
        {
          value: "3",
          label: "广电",
        },
      ],
    };
  },
  mounted() {
    this.getAppBroadbandList();
  },
  methods: {
    // 获取全部宽带套餐
    getAppBroadbandList() {
      getAppBroadbandList({
        page_now: this.pageNow,
        page_size: this.pageSize,
      }).then((res) => {
        if (res.code == 1) {
          this.broadbandTableData = res.data;
          this.total = res.page_info.total_count;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 添加宽带套餐
    addAppBroadband() {
      addAppBroadband({
        name: this.ruleFormAdd.name,
        mini_text: this.ruleFormAdd.mini_text,
        price: this.ruleFormAdd.price,
        belonging_place: this.ruleFormAdd.belonging_place,
        operator: this.ruleFormAdd.operator,
        front_back: this.ruleFormAdd.front_back,
        is_upload: this.ruleFormAdd.is_upload,
        cover_img: this.ruleFormAdd.cover_img,
        head_img: this.ruleFormAdd.head_img,
        details: this.ruleFormAdd.details,
        hkgj_package_id: this.ruleFormAdd.hkgj_package_id
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisibleAdd = false;
          this.getAppBroadbandList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 添加
    handlerAdd() {
      this.dialogTitle = "添加";
      this.dialogVisibleAdd = true;
      localStorage.setItem("uploadType", "9");
    },

    // 添加弹窗-右上角叉号
    handleCloseDialog() {
      this.dialogVisibleAdd = false;
      this.ruleFormAdd = {};
    },

    // 添加弹窗确定
    handlerSureAdd(formName) {
      if (this.ruleFormAdd.id) {
        this.updateAppBroadband();
        this.ruleFormAdd = {};
      } else {
        this.addAppBroadband();
        this.ruleFormAdd = {};
      }
    },

    // 添加弹窗取消
    handlerCancelAdd(formName) {
      this.dialogVisibleAdd = false;
      this.ruleFormAdd = {};
    },

    // 上传主图
    onSuccessFileCover(val) {
      this.ruleFormAdd.cover_img = val.data.path;
    },
    onErrorFileCover(val) {
      this.apkValue = val.data.path;
    },

    // 上传头图
    onSuccessFileHeader(val) {
      this.ruleFormAdd.head_img = val.data.path;
    },
    onErrorFileHeader(val) {
      this.apkValue = val.data.path;
    },

    upEnabled(e, val) {
      this.$confirm("是否更改上下架状态?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          updateAppBroadband({
            id: val.id,
            is_upload: e,
          })
            .then((res) => {
              if (res.code == 1) {
                this.$message.success("修改成功");
                this.getAppBroadbandList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.getAppBroadbandList();
            });
        })
        .catch(() => {
          this.getAppBroadbandList();
        });
    },

    // 修改套餐
    updateAppBroadband() {
      updateAppBroadband({
        id: this.ruleFormAdd.id,
        name: this.ruleFormAdd.name,
        mini_text: this.ruleFormAdd.mini_text,
        price: this.ruleFormAdd.price,
        belonging_place: this.ruleFormAdd.belonging_place,
        operator: this.ruleFormAdd.operator,
        front_back: this.ruleFormAdd.front_back,
        is_upload: this.ruleFormAdd.is_upload,
        cover_img: this.ruleFormAdd.cover_img,
        head_img: this.ruleFormAdd.head_img,
        details: this.ruleFormAdd.details,
        hkgj_package_id: this.ruleFormAdd.hkgj_package_id
      }).then((res) => {
        if (res.code == 1) {
          this.$message.success(res.msg);
          this.dialogVisibleAdd = false;
          this.getAppBroadbandList();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 修改
    handleEdit(val) {
      this.dialogTitle = "编辑";
      this.ruleFormAdd = val;
      this.$nextTick(() => {
        this.$refs.myEditor.setContent(val.details);
      });
      this.ruleFormAdd.front_back = String(val.front_back);
      this.dialogVisibleAdd = true;
    },

    // 分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAppBroadbandList();
    },
    handleCurrentChange(val) {
      this.pageNow = val;
      this.pageSize = 10;
      this.getAppBroadbandList();
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog_add_box {
  .main_img_box {
    width: 200px;
    height: 200px;
    margin-top: 15px;
  }
}
</style>
